<template>
  <view class="page test-page">
    <view class="test-header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="progress-info">
        <text class="progress-text">{{ currentQuestionIndex + 1 }} / {{ questions.length }}</text>
        <text class="progress-label">题目进度</text>
      </view>
      <view class="close-btn" @click="closeTest">
        <text class="close-icon">✕</text>
      </view>
    </view>
    
    <view class="progress-bar">
      <view class="progress-line">
        <view class="progress-fill" :style="{ width: progressWidth }"></view>
      </view>
    </view>
    
    <view class="question-container">
      <view class="question-number">第 {{ currentQuestionIndex + 1 }} 题</view>
      <span class="question-number">请按第一印象最快的选择，如果不能确定，可回忆童年时的情况，或者以你最熟悉的人对你的评价来从中选择。</span>
      <text class="question-title">{{ currentQuestionText }}</text>
      
      <view class="options">
        <button 
          v-for="(option, index) in currentQuestionOptions" 
          :key="index"
          class="option-btn"
          :class="{ selected: selectedOptions[currentQuestionIndex] === index }"
          @click="selectOption(index)"
        >
          <view class="option-letter">{{ getOptionLetter(index) }}</view>
          <view class="option-content">{{ option.text }}</view>
        </button>
      </view>
    </view>
    
    <view class="navigation" v-if="currentQuestionIndex === questions.length - 1 && selectedOptions[currentQuestionIndex] !== undefined">
      <button 
        v-if="hasToken"
        class="nav-btn submit-btn" 
        @click="submitTest"
      >
        提交
      </button>
      
       <button 
        v-else
        class="nav-btn submit-btn" 
        open-type="getPhoneNumber" 
        @getphonenumber="getPhoneNumber"
      >
        <text class="wechat-text">提交</text>
      </button>
    </view>

    <!-- 提示语 -->
    <view class="test-notes">
      <view class="note-item">
        <text class="note-number">[1]</text>
        <text class="note-content">测评基于瑞士心理学家荣格(Carl Jung)的《人格分类》理论,及美国心理学家迈尔斯(Isabel Briggs Myers)与其母亲凯瑟琳·库克布里格斯(Katharine Cook Briggs)的实证研究，是国际十分流行的性格测试模型。</text>
      </view>
      <view class="note-item">
        <text class="note-number">[2]</text>
        <text class="note-content">测评时间预计5-10分钟，请在心态平和及时间充足的情况下开始答题。</text>
      </view>
      <view class="note-item">
        <text class="note-number">[3]</text>
        <text class="note-content">选项间无对错好坏之分，请选择与你实际做法相符的，而不是你认为怎样做是对的。</text>
      </view>
    </view>

    <!-- 我的报告入口 -->
    <view class="order-entry">
      <button class="order-btn" @click="goToOrders">
        <text class="order-icon">📋</text>
        <text class="order-text">我的报告</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TestPage',
  props: {
    currentQuestionIndex: {
      type: Number,
      default: 0
    },
    questions: {
      type: Array,
      default: () => []
    },
    selectedOptions: {
      type: Array,
      default: () => []
    },
    currentQuestionText: {
      type: String,
      default: ''
    },
    currentQuestionOptions: {
      type: Array,
      default: () => []
    },
    hasToken: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentQuestionIndex];
    },
    progressWidth() {
      return `${((this.currentQuestionIndex + 1) / this.questions.length) * 100}%`;
    }
  },
  methods: {
     getPhoneNumber(e) {
      this.$emit('get-phone-number', e,"test");
    },
    getOptionLetter(index) {
      return String.fromCharCode(65 + index); // A, B, C, D...
    },
    goBack() {
      this.$emit('go-back');
    },
    closeTest() {
      // 发送关闭测试事件到父组件
      this.$emit('close-test');
    },
    selectOption(optionIndex) {
      this.$emit('select-option', optionIndex);
    },
    submitTest() {
      this.$emit('submit-test');
    },
    goToOrders() {
      // 通过事件向父组件传递信息，改变currentPage字段
      this.$emit('change-page', 'order');
      console.log('跳转到订单页面');
    }
  },
  watch: {
    // 监听题目变化，确保数据格式正确
    questions: {
      handler(newQuestions) {
        if (newQuestions && newQuestions.length > 0) {
          // 确保每道题目的选项格式正确
          newQuestions.forEach(question => {
            // 确保题目有text属性
            if (!question.text && question.question) {
              question.text = question.question;
            }
            
            // 确保选项格式正确
            if (question.options && Array.isArray(question.options)) {
              question.options = question.options.map(option => {
                if (typeof option === 'string') {
                  return { text: option };
                }
                return option;
              });
            } else if (question.optionA && question.optionB) {
              // 如果options不是数组，但有optionA和optionB，需要转换
              question.options = [
                { text: question.optionA },
                { text: question.optionB }
              ];
            }
          });
        }
      },
      immediate: true
    },
    currentQuestionIndex: {
      handler(newIndex) {
        console.log('TestPage: 题目索引更新为', newIndex);
      },
      immediate: true
    },
    currentQuestionText: {
      handler(newText) {
        console.log('TestPage: 题目文本更新为', newText);
      },
      immediate: true
    },
    currentQuestionOptions: {
      handler(newOptions) {
        console.log('TestPage: 题目选项更新，选项数量:', newOptions ? newOptions.length : 0);
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.test-page {
  background-image: url('https://hongcat-beta.oss-cn-chengdu.aliyuncs.com/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.test-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1;
}

.test-header {
  display: flex;
  margin-top: 80px;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  position: relative;
  z-index: 3;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102,126,234,0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.back-btn:active {
  transform: scale(0.9);
  background: rgba(102,126,234,0.2);
}

.back-icon {
  font-size: 36rpx;
  color: #667eea;
  font-weight: bold;
}

.progress-info {
  text-align: center;
}

.progress-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.progress-label {
  font-size: 24rpx;
  color: #666;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 99, 99, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:active {
  transform: scale(0.9);
  background: rgba(255, 99, 99, 0.2);
}

.close-icon {
  font-size: 36rpx;
  color: #ff6363;
  font-weight: bold;
}

.placeholder {
  width: 60rpx;
}

.progress-bar {
  padding: 0 40rpx 30rpx;
  position: relative;
  z-index: 3;
}

.progress-line {
  height: 12rpx;
  background: rgba(102,126,234,0.1);
  border-radius: 6rpx;
  overflow: hidden;
  position: relative;
}

.progress-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6rpx;
  position: relative;
  overflow: hidden;
  transition: width 0.3s ease;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20rpx;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
  animation: progressGlow 1s ease-in-out infinite alternate;
}

@keyframes progressGlow {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

.question-container {
  background: #fff;
  backdrop-filter: blur(20rpx);
  border-radius: 30rpx;
  padding: 50rpx 40rpx;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15);
  margin: 30rpx 40rpx;
  position: relative;
  z-index: 3;
  border: 1rpx solid rgba(255,255,255,0.2);
}

.question-container::before {
  /* content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
  border-radius: 30rpx;
  z-index: -1;
  opacity: 0.3;
  animation: borderGlow 3s ease-in-out infinite alternate; */
}

@keyframes borderGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.6; }
}

.question-number {
  font-size: 28rpx;
  color: #667eea;
  margin-bottom: 20rpx;
  font-weight: bold;
  display: inline-block;
  background: rgba(102,126,234,0.1);
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.question-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 40rpx;
  line-height: 1.5;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.option-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 140rpx;
  background: rgba(248,249,250,0.8);
  backdrop-filter: blur(10rpx);
  border: 3rpx solid rgba(233,236,239,0.6);
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.option-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102,126,234,0.1), transparent);
  transition: left 0.5s ease;
}

.option-btn:active::before {
  left: 100%;
}

.option-btn.selected {
  background: rgba(230,241,255,0.9);
  border-color: #667eea;
  transform: translateY(-5rpx);
  box-shadow: 0 15rpx 30rpx rgba(102,126,234,0.25);
}

.option-btn.selected::after {
  content: '✓';
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 40rpx;
  height: 40rpx;
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  animation: checkIn 0.3s ease-out;
}

@keyframes checkIn {
  0% { transform: scale(0) rotate(-180deg); }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.option-letter {
  width: 60rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 32rpx;
  margin-right: 25rpx;
  flex-shrink: 0;
  box-shadow: 0 4rpx 15rpx rgba(102,126,234,0.3);
}

.option-content {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
}

/* 测试提示语样式 */
.test-notes {
  /* background-color: #fff9e6; */
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 0 40rpx 30rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
}

.note-item {
  display: flex;
  margin-bottom: 20rpx;
}

.note-item:last-child {
  margin-bottom: 0;
}

.note-number {
  font-weight: bold;
  color: #007aff;
  margin-right: 10rpx;
  flex-shrink: 0;
}

.note-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.navigation {
  display: flex;
  justify-content: space-between;
  padding: 0 40rpx 40rpx;
  position: relative;
  z-index: 3;
}

.nav-btn {
  width: 45%;
  height: 100rpx;
  border-radius: 25rpx;
  font-size: 34rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.nav-btn:active::before {
  left: 100%;
}

.nav-btn:active {
  transform: scale(0.98);
}

.nav-btn[disabled] {
  background-color: #e9ecef;
  color: #999;
  box-shadow: none;
}

.prev-btn {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10rpx);
  color: #667eea;
  border: 2rpx solid rgba(102,126,234,0.3);
}

.prev-btn:active {
  background: rgba(255,255,255,0.7);
}

.next-btn {
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  box-shadow: 0 8rpx 25rpx rgba(102,126,234,0.4);
}

.next-btn:active {
  box-shadow: 0 4rpx 15rpx rgba(102,126,234,0.4);
}

.next-btn[disabled] {
  background: #cccccc;
  box-shadow: none;
  transform: none;
}

.next-btn[disabled]::before {
  display: none;
}

/* 订单入口样式 */
.order-entry {
  margin: 30rpx 40rpx;
  position: relative;
  z-index: 3;
}

.order-btn {
  width: 100%;
  height: 80rpx;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10rpx);
  color: #333;
  border: 2rpx solid rgba(255,255,255,0.3);
  border-radius: 20rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

.order-btn:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.25);
}

.order-icon {
  font-size: 36rpx;
  margin-right: 15rpx;
}

.order-text {
  font-weight: 500;
}
</style>